<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el-table</title>
    <link rel="stylesheet" href="../lib/element-plus/index.css">
</head>
<body>


<div id="app">


    <el-table :data="list.filter(function (item){
         return item.isRemoved ==false;
     })"
     border stripe hover
    >

        <el-table-column prop="name" label="员工姓名" width="120">

        </el-table-column>
        <el-table-column prop="gender" label="性别" width="120">

        </el-table-column>
        <el-table-column prop="age" label="年龄">

        </el-table-column>


        <el-table-column label="操作">

            <template #default="scope">
                <el-button @click="btnEditClick(scope.row)">编辑</el-button>
                <el-button @click="btnRemoveClick(scope.row)">删除</el-button>
            </template>

        </el-table-column>

    </el-table>


    <el-dialog v-model="isShow">

         <el-form label-width="120px">
              <el-form-item label="员工姓名">
                   <el-input v-model="info.name"></el-input>
              </el-form-item>

             <el-form>
                  <el-button type="primary" @click="btnSubmitClick">修改</el-button>
             </el-form>
         </el-form>

    </el-dialog>

</div>
</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/element-plus/index.full.js"></script>
<script>

    var app = Vue.createApp({
        data: function () {
            return {
                list: [
                    {
                        id: 1,
                        name: 'L',
                        gender: 'male',
                        age: 23,
                        isRemoved:false
                    }, {
                        id: 2,
                        name: 'T',
                        gender: 'female',
                        age: 23,
                        isRemoved:false
                    }
                ], isShow: false,
                info: {
                    id: '',
                    name: '',
                    gender: '',
                    age:-1
                }
            }

        }, methods: {
            btnEditClick: function (row) {
                this.isShow = true;

                this.info = row;
            },btnSubmitClick:function (){

                 this.isShow = false;
            },btnRemoveClick:function (row){

                if(confirm("是否上传当前数据")){

                    row.isRemoved = true;
                    this.isShow = false;
                }
            }

        }
    });
    app.use(ElementPlus).mount('#app')
</script>
</html>